import { observer } from "mobx-react";
import Dialog from "..";
import { WeaInput,WeaLocaleProvider } from "ecCom";
import AceEditor from 'react-ace';
import {Row,Col} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

import 'brace/mode/javascript';
import 'brace/theme/tomorrow';

@observer
export default class AceEditorDialog extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <Dialog
                dialog={store}
                className="edc-datasource-dialog"
                style={{ height: 400 }}
            >
            <Row style={{top:'5px', bottom:'5px' ,height:'40px',lineHeight:'25px'}}>
            <Col span={20} >
                <span style={{width:200,marginLeft: 15,fontSize:14}}>{getLabel('502686','公式名')}：&nbsp;&nbsp;&nbsp;</span>
                <WeaInput
                helpfulTip={getLabel('502687','公式名（描述）')}
                style={{ marginLeft:50,width: 250 }}
                id="describe"
                value={store.currentFormulaDescribe}
                onChange={store.changeDes}
                />
            </Col>
            </Row>
            <Row style={{top:'5px', bottom:'5px' ,height:'40px',lineHeight:'25px'}}>
            <Col span={20} >
                <span style={{width:100,marginLeft: 15,fontSize:14}}>{getLabel('502688','方法名')}：&nbsp;&nbsp;&nbsp;</span>
                <WeaInput
                helpfulTip={getLabel('502689','该方法名必须与方法体中的方法名保持一致')}
                style={{ marginLeft:50,width: 250 }}
                id="name"
                value={store.currentFormulaTitle}
                onChange={store.changeName}
                />
                </Col>
            </Row>
           
                <AceEditor
                    top ="100"
                    mode="javascript"
                    theme="tomorrow"
                    onChange={store.onChange}
                    value={store.currentFormulaContent}
                    name="UNIQUE_ID_OF_DIV"
                    focus={"true"}
                    editorProps={{$blockScrolling: true}}
                    height = {"80%"}
                    width = {"100%"}
                />
            </Dialog>
        )
    }
}